<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 顶部文字声明和新增按钮 -->
        <el-row justify="space-between" type="flex" style="margin-bottom: 15px;">
            <span style="font-size: 12px; color: pink">
              说明：目前支持学科和关键字条件筛选
            </span>
            <el-button type="success" size="small" @click="$router.push('new')">
              <i class="el-icon-edit"></i>新增试题
            </el-button>
        </el-row>
        <!-- 表单组件 -->
        <search-form
          @search-result="searchResult">
        </search-form>
        <!-- 总数据条数 -->
        <el-row style="backgroundColor: #f4f4f5; margin-bottom: 15px; padding: 8px 16px; font-size: 13px; color: #909399">
          <i class="el-icon-info" style="font-size: 16px; margin-right: 7px"></i>数据一共 {{ total }} 条
        </el-row>
        <!-- 试题表格 -->
          <el-table
            :data="questionList"
            style="width: 100%">
            <el-table-column
              prop="number"
              label="试题编号"
              width="120px">
            </el-table-column>
            <el-table-column
              prop="subject"
              label="学科">
            </el-table-column>
            <el-table-column
              prop="catalog"
              label="目录">
            </el-table-column>
            <el-table-column
              prop="questionType"
              label="题型">
            </el-table-column>
            <el-table-column
              prop="question"
              label="题干"
              width="240px">
            </el-table-column>
            <el-table-column
              prop="addDate"
              label="录入时间"
              width="180px">
            </el-table-column>
            <el-table-column
              prop="difficulty"
              label="难度">
            </el-table-column>
            <el-table-column
              prop="creator"
              label="录入人"
              width="130px">
            </el-table-column>
            <el-table-column
              label="操作"
              width="180px">
              <!-- 作用域插槽 -->
              <template #default="{ row }">
                <!-- 预览 -->
                <el-button
                  class="view"
                  icon="el-icon-view"
                  circle size="small"
                  @click="dialogOpen(row.id)">
                </el-button>
                <!-- 编辑 -->
                <el-button
                  class="edit"
                  icon="el-icon-edit"
                  circle size="small"
                  @click="editQuestion(row.id)"></el-button>
                <!-- 删除 -->
                <el-button
                  class="delete"
                  icon="el-icon-delete"
                  circle size="small"
                  @click="deleteQuestion(row)">
                </el-button>
                <!-- 精选 -->
                <el-button
                  class="check"
                  icon="el-icon-check"
                  circle size="small"
                  @click="checkQuestion(row.id)">
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <el-row style="text-align: right; margin-top: 15px">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="pagesize"
              layout="prev, pager, next, sizes, jumper"
              :total="total">
            </el-pagination>
          </el-row>
      </el-card>
    </div>
    <!-- 弹窗组件（LiNan） -->
    <questions-preview
      :dialogVisible='dialogVisible'
      @dialog-close="dialogClose"
      :questionsId="questionsId">
    </questions-preview>
  </div>
</template>

<script>
import { list as questionList, remove, choiceAdd, detail } from '@/api/hmmm/questions'
import dayjs from 'dayjs'
import SearchForm from '@/module-hmmm/components/searchForm'
import QuestionsPreview from "../components/questions-preview.vue"

export default {
  components: {
    SearchForm,
    QuestionsPreview
  },
  data() {
    return {
      questionList: [],
      page: 1,
      pagesize: 5,
      questionTypeMap: {
        1: '单选',
        2: '多选'
      },
      difficultyMap: {
        1: '简单',
        2: '困难'
      },
      total: 0,
      choiceState: 0,
      dialogVisible: false,
      questionsId: 0
    }
  },
  created() {
    this.fetchquestionList({
      page: this.page,
      pagesize: this.pagesize
    })
  },
  methods: {
    // 获取并渲染试题列表
    async fetchquestionList(data) {
      // 调取表单选项信息接口
      const res = await questionList(data)

      this.questionList = res.data.items
      // 试题总条数
      this.total = res.data.counts
      
      this.questionList.forEach(item => {
        // 格式化时间
        item.addDate = dayjs(item.addDate).format('YYYY-MM-DD hh:mm:ss')
        // 修改试题类型展示数据
        item.questionType = this.questionTypeMap[item.questionType]
        // 修改困难程度展示数据
        item.difficulty = this.difficultyMap[item.difficulty]
        // 修改题干的文字
        item.question = this.dealQuestion(item.question)
      })
    },
    // page发生变化
    handleCurrentChange(page) {
      this.page = page
      this.fetchquestionList({
        page: this.page,
        pagesize: this.pagesize
      })
    },
    // pagesize发生变化
    handleSizeChange(size) {
      this.pagesize = size
      this.fetchquestionList({
        page: this.page,
        pagesize: this.pagesize
      })
    },
    // 去除题干字段的html标签
    dealQuestion(string) {
      const reg = /(<([^>]+)>)/ig
      return string.replace(reg, "")
    },
    // 删除试题
    deleteQuestion(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 调用删除试题接口
        await remove(row)
        this.$message.success('删除试题成功')
        this.fetchquestionList({
          page: this.page,
          pagesize: this.pagesize
        })
      })
    },
    // 搜索功能
    searchResult(subjectID, keyword) {
      if(subjectID === '' || keyword === '') {
        this.fetchquestionList({
          page: this.page,
          pagesize: this.pagesize
        })
      } else {
        this.fetchquestionList({
          page: this.page,
          pagesize: this.pagesize,
          subjectID,
          keyword
        })
      }
    },
    // 编辑功能
    editQuestion(id) {
      this.$router.push({
        name: 'questions-new',
        query: {
          id
        }
      })
    },
    // 加入精选
    checkQuestion(id) {
      this.$confirm('此操作将会把该试题加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.choiceState = 1
        // 调用加入精选接口
        await choiceAdd({
          choiceState: this.choiceState,
          id
        })
        this.$message.success('加入精选成功')
        this.fetchquestionList({
          page: this.page,
          pagesize: this.pagesize
        })
      })
    },
    

    // 预览的弹窗
    dialogOpen(id){
      this.dialogVisible = true
      this.questionsId = id
    },
    dialogClose(){
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
.btn {
  padding: 9px;
  border-radius: 50%;
}
.view {
  border: 1px solid #b3d8ff;
  color: #409eff;
  background: #ecf5ff;
  
}
.view:hover {
  background: #409eff;
  color: white;
}
.edit {
  color: #67c23a;
  background: #f0f9eb;
  border: 1px solid #c2e7b0;
  margin-left: 10px;
}
.edit:hover {
  background: #67c23a;
  color: white;
}
.delete {
  color: #f56c6c;
  background: #fef0f0;
  border: 1px solid #fbc4c4;
  margin-left: 10px;
}
.delete:hover {
  background: #f56c6c;
  color: white;
}
.check {
  color: #e6a23c;
  background: #fdf6ec;
  border: 1px solid #f5dab1;
  margin-left: 10px;
}
.check:hover {
  background: #e6a23c;
  color: white;
}
</style>
